<template>
    <el-tooltip effect="dark" placement="bottom">
        <div slot="content" class="ivrkey-detail-wrap">
            <div class="ivr-title">{{$t('call.ivrKeyDetail')}}</div>
            <p class="ivr-p1">{{getIvrDetail}}</p>
            <p class="ivr-p2">{{ivrInfo}}</p>
        </div>
      <p class="ivrKey ellipsis">{{ivrKeyText}}</p>
    </el-tooltip>
</template>
<script>
  // 此组件是按键菜单详情组件
    export default {
      name: 'ivrKeyDetail',
      data () {
        return {
          ivrKeyText: '',
          popoverText: '',
          ivrInfo: ''
        }
      },
      props: {
        ivrkey: String, // 按键
        tanping: String,
        keyMemoMap: {
          type: Object,
          default: function () {
            return {}
          }
        }
      },
      computed: {
        getIvrDetail () { // 获取按键菜单的详情
          if (this.ivrkey) {
            // data eg: 100063@1-100062@2-100064@5
            let keyStr = this.ivrkey
            let keyArr = keyStr.split('-')
            let showHtml = ''
            let littleHtml = ''
            for (let i = 0; i < keyArr.length; i++) {
              if (keyArr[i].indexOf('@') > 0) {
                let keyMemoArr = keyArr[i].split('@')
                if (this.keyMemoMap[keyMemoArr[0]] && this.keyMemoMap[keyMemoArr[0]][keyMemoArr[1]]) {
                  showHtml += this.keyMemoMap[keyMemoArr[0]][keyMemoArr[1]] + '[' + keyMemoArr[1] + ']-'
                } else {
                  showHtml += '[' + keyMemoArr[1] + ']-'
                }
                littleHtml += keyMemoArr[1] + '-'
              }
            }
            if (littleHtml.substr(littleHtml.length - 1, 1) === '-') {
              littleHtml = littleHtml.substr(0, littleHtml.length - 1)
            }
            if (showHtml.substr(showHtml.length - 1, 1) === '-') {
              showHtml = showHtml.substr(0, showHtml.length - 1)
            }
            this.ivrInfo = '' // 先清空，否则会带上旧值
            if (this.tanping) {
              let info = ''
              if (this.tanping.substring(0, 1) !== '_') {
                info += this.$t('call.ivrInfoText') + this.tanping
              }

              this.ivrInfo = info
            }
            this.ivrKeyText = '' // 先清空，否则会带上旧值
            this.popoverText = '' // 先清空，否则会带上旧值
            this.ivrKeyText = littleHtml
            this.popoverText = showHtml
            return showHtml
          } else {
            this.ivrInfo = '' // 先清空，否则会带上旧值
            if (this.tanping) {
              if (this.tanping.substring(0, 1) !== '_') {
                this.ivrInfo = this.tanping
                this.ivrKeyText = this.tanping
              }
            }
            return ''
          }
        }
      }
    }
</script>
<style lang="stylus" scoped>
  .ivrkey-detail-wrap
    overflow hidden
    word-break break-all
  .ivrKey
    max-width 6em
</style>

